<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人博客 | 分享技术与生活</title>
    <!-- Bootstrap 4 CSS -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/style.css">
    <!-- Bootstrap JS 依赖 -->
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/moment.js"></script>
</head>
<body>
<!-- 导航栏 -->
    <%@include file="public/header.jsp"%>
<!-- 头部横幅 -->
<header class="jumbotron jumbotron-fluid bg-info text-white mb-4">
    <div class="container text-center">
        <h1 class="display-4">探索技术前沿</h1>
        <p class="lead">分享最新技术趋势、开发技巧与行业见解</p>
        <a class="btn btn-light btn-lg mt-3" href="${pageContext.request.contextPath}/article/queryNewestArticle">
            阅读最新文章
        </a>
    </div>
</header>

<!-- 主要内容区 -->
<div class="container">
    <div class="row">
        <!-- 文章列表 -->
        <main class="col-lg-8">
            <!-- 特色文章 -->
            <!-- <div class="card mb-4 shadow">
                <img src="img/img.png" class="card-img-top" alt="特色文章">
                <div class="card-body">
                    <div class="badge badge-primary mb-2">精选</div>
                    <h2 class="card-title">2024年Web开发趋势预测</h2>
                    <p class="card-text">探索即将改变前端开发格局的技术与框架，了解React、Vue和Svelte的最新发展...</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="media align-items-center">
                            <img src="https://randomuser.me/api/portraits/men/32.jpg" class="rounded-circle mr-2" width="30" alt="作者">
                            <div class="media-body">
                                <small class="text-muted">李明 · 2023年12月15日 · 阅读时间 8分钟</small>
                            </div>
                        </div>
                        <a href="#" class="btn btn-sm btn-outline-primary">阅读全文</a>
                    </div>
                </div>
            </div> -->

            <!-- 文章列表 -->
            <div class="row">
                <%--    文章列表    --%>
                <c:forEach items="${pageInfo.list}" var="article">
                    <div class="col-md-6 mb-4">
                        <div class="card h-100 shadow-sm">
                            <div class="card-body">
                                <!-- <div class="badge badge-success mb-2">新发布</div> -->
                                <h5 class="card-title"><a href="${pageContext.request.contextPath}/article/articleDetail/${article.articleId}">${article.articleTitle}</a></h5>
                                <p class="card-text">${article.articleSummary}</p>
                                <div class="d-flex justify-content-between align-items-center mt-3">
                                    <small class="text-muted" id="">${article.articleCreateTimeFormat}</small>
                                    <span class="badge badge-pill badge-light">${article.articleAuthor.username}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </c:forEach>
            </div>
            <script>
                function formatDateTime(text){
                    const dateFormatter = 'YYYY年MM月DD日';
                    var formatDate = moment(text).format(dateFormatter);
                    return formatDate;
                }
            </script>
            <!-- 分页 -->
            <nav class="mt-4">
                <ul class="pagination justify-content-center" id="pagination">
<%--                    <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>--%>
<%--                    <li class="page-item active"><a class="page-link" href="#">1</a></li>--%>
<%--                    <li class="page-item"><a class="page-link" href="#">2</a></li>--%>
<%--                    <li class="page-item"><a class="page-link" href="#">3</a></li>--%>
<%--                    <li class="page-item"><a class="page-link" href="#">下一页</a></li>--%>
                </ul>
            </nav>
        </main>

        <!-- 侧边栏 -->
        <aside class="col-lg-4">
            <!-- 关于作者 -->
            <div class="card mb-4 shadow-sm">
                <div class="card-body text-center">
                    <img src="https://randomuser.me/api/portraits/men/41.jpg" class="rounded-circle mb-3" width="100" alt="作者">
                    <h5 class="card-title">${user.username}</h5>
<%--                    <p class="card-text">全栈开发工程师，技术博客作者，热爱分享Web开发经验与最佳实践。</p>--%>
<%--                    <div class="d-flex justify-content-center">--%>
<%--                        <a href="#" class="btn btn-sm btn-outline-primary mr-2">关注</a>--%>
<%--                        <a href="#" class="btn btn-sm btn-outline-secondary">联系</a>--%>
<%--                    </div>--%>
                </div>
            </div>
            <!-- 分类 -->
            <%--<div class="card mb-4 shadow-sm">
                <div class="card-header bg-light">
                    <h5 class="mb-0">文章分类</h5>
                </div>
                <div class="list-group list-group-flush">
                    <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                        前端开发
                        <span class="badge badge-primary badge-pill">24</span>
                    </a>
                    <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                        JavaScript
                        <span class="badge badge-primary badge-pill">18</span>
                    </a>
                    <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                        CSS框架
                        <span class="badge badge-primary badge-pill">12</span>
                    </a>
                    <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                        响应式设计
                        <span class="badge badge-primary badge-pill">9</span>
                    </a>
                    <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                        工具与资源
                        <span class="badge badge-primary badge-pill">15</span>
                    </a>
                </div>
            </div>--%>

            <!-- 热门文章 -->
           <%-- <div class="card mb-4 shadow-sm">
                <div class="card-header bg-light">
                    <h5 class="mb-0">热门文章</h5>
                </div>
                <div class="list-group list-group-flush" id="popularArticle">
                   &lt;%&ndash;通过ajax发出请求获取热门文章信息&ndash;%&gt;
                </div>
            </div>--%>
            <%@include file="public/popularArticles.jsp"%>
        </aside>
    </div>
</div>
<script>
    window.onload=function (){
        //动态处理分页
        //清空旧按钮
        $("#pagination").empty();
        //判断页数，仅一页不展示分页按钮
        var pages = ${pageInfo.pages};
        if(pages <= 1){
            return;
        }
        // 上一页按钮
        const prevBtn = $('<li class="page-item">')
            .append($('<a class="page-link" id="aPre">').text('上一页'));
        $("#pagination").append(prevBtn);

        if(${pageInfo.isFirstPage}) {
            prevBtn.addClass('disabled');
        }
        else{
            const preNum = ${pageInfo.pageNum} - 1;
            $('#aPre').attr('href','${pageContext.request.contextPath}/article/index/'+preNum);
        }
        //显示当前页数为中心前后两页 如：当前页5 显示34567
        const minPageNum = Math.max(1,${pageInfo.pageNum}-2);
        const maxPageNum = Math.min(${pageInfo.pages},${pageInfo.pageNum}+2);
        for(var idx = minPageNum;idx <= maxPageNum;idx++){
            var btn = $('<li class="page-item">');
            var aBtn = $('<a class="page-link">');
            aBtn.attr('href','${pageContext.request.contextPath}/article/index/'+idx);
            aBtn.text(idx);
            var curPage = ${pageInfo.pageNum};
            // 是否是当前页
            if(curPage == idx){
                btn.addClass('active');
            }
            btn.append(aBtn);
            $("#pagination").append(btn);
        }

        // 下一页按钮
        const nextBtn = $('<li class="page-item">')
            .append($('<a class="page-link" id="aNext">').text('下一页'));
        $("#pagination").append(nextBtn);

        if(${pageInfo.isLastPage}) {
            nextBtn.addClass('disabled');
        }
        else{
            const nextNum = ${pageInfo.pageNum} + 1;
            $('#aNext').attr('href','${pageContext.request.contextPath}/article/index/'+nextNum);
        }
    }
</script>
    <!-- 页脚 -->
    <%@include file="public/footer.jsp"%>
</body>
</html>
